<template>
  <div class="chat-container">
    <!-- 顶部导航栏 -->
    <header class="chat-header">
      <div class="header-left">
        <h1 class="title">
          <el-icon><MessageBox /></el-icon>
          AI数据库管理助手
        </h1>
        <div class="connection-status">
          <el-tag :type="chatStore.isConnected ? 'success' : 'danger'" size="small">
            {{ chatStore.isConnected ? '已连接' : '未连接' }}
          </el-tag>
        </div>
      </div>
      
      <div class="header-right">
        <el-button-group>
          <el-button @click="$router.push('/history')" type="info" :icon="Clock">
            历史记录
          </el-button>
          <el-button @click="$router.push('/system')" type="warning" :icon="Setting">
            系统状态
          </el-button>
          <el-button @click="startNewSession" type="primary" :icon="Plus">
            新会话
          </el-button>
        </el-button-group>
      </div>
    </header>

    <!-- 聊天消息区域 -->
    <main class="chat-messages" ref="messagesContainer">
      <div class="messages-list">
        <div
          v-for="message in chatStore.messages"
          :key="message.id"
          :class="['message-item', `message-${message.type}`]"
        >
          <ChatMessage :message="message" />
        </div>
      </div>
    </main>

    <!-- 输入区域 -->
    <footer class="chat-input">
      <div class="input-container">
        <div class="input-options">
          <el-checkbox v-model="includeDetails" size="small">
            显示详细信息
          </el-checkbox>
        </div>
        
        <div class="input-row">
          <el-input
            v-model="inputMessage"
            type="textarea"
            :rows="3"
            resize="none"
            placeholder="请输入您的问题，例如：查询所有用户、添加新用户、统计数据等..."
            :disabled="chatStore.isLoading"
            @keydown.ctrl.enter="sendMessage"
            @keydown.meta.enter="sendMessage"
            class="message-input"
          />
          
          <div class="input-actions">
            <el-button
              type="primary"
              :loading="chatStore.isLoading"
              :disabled="!inputMessage.trim() || !chatStore.isConnected"
              @click="sendMessage"
              size="large"
              :icon="Position"
            >
              发送
            </el-button>
          </div>
        </div>
        
        <div class="input-hints">
          <el-text size="small" type="info">
            提示：按 Ctrl+Enter 快速发送消息
          </el-text>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  MessageBox, 
  Clock, 
  Setting, 
  Plus, 
  Position 
} from '@element-plus/icons-vue'
import { useChatStore } from '@/stores/chat'
import ChatMessage from '@/components/ChatMessage.vue'

const chatStore = useChatStore()

// 响应式数据
const inputMessage = ref('')
const includeDetails = ref(false)
const messagesContainer = ref<HTMLElement>()

// 发送消息
async function sendMessage() {
  if (!inputMessage.value.trim()) {
    ElMessage.warning('请输入问题')
    return
  }

  const message = inputMessage.value
  inputMessage.value = ''
  
  await chatStore.sendMessage(message, includeDetails.value)
  
  // 滚动到底部
  await nextTick()
  scrollToBottom()
}

// 开始新会话
function startNewSession() {
  chatStore.startNewSession()
  scrollToBottom()
}

// 滚动到底部
function scrollToBottom() {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 组件挂载后滚动到底部
onMounted(() => {
  nextTick(() => {
    scrollToBottom()
  })
})
</script>

<style scoped>
.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.chat-header {
  background: #fff;
  padding: 16px 24px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.connection-status {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scroll-behavior: smooth;
}

.messages-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message-item {
  width: 100%;
}

.chat-input {
  background: #fff;
  border-top: 1px solid #e4e7ed;
  padding: 16px 24px;
}

.input-container {
  max-width: 900px;
  margin: 0 auto;
}

.input-options {
  margin-bottom: 8px;
  display: flex;
  justify-content: flex-end;
}

.input-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.message-input {
  flex: 1;
}

.input-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.input-hints {
  margin-top: 8px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-header {
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
  }
  
  .header-left,
  .header-right {
    width: 100%;
    justify-content: center;
  }
  
  .title {
    font-size: 18px;
  }
  
  .chat-messages {
    padding: 12px;
  }
  
  .chat-input {
    padding: 12px 16px;
  }
  
  .input-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .input-actions {
    width: 100%;
  }
  
  .input-actions .el-button {
    width: 100%;
  }
}
</style>